
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>添加新生</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <%--<script>
      $(function () {
           $.getJSON("grade-findALL.do",function (data) {
               let g=$("#gradeid");
               $.each(data,function (i,d) {
                  g.append("<option value='"+d.id+"'>"+d.gname+"</option>");
               });
           });
           $("#phone").blur(function () {
               //console.log(t);
               if(this.value=="")
               {
                   return false;
               }
               //$.ajax(
               //res就是服务器的返回的那个resp.print
               $.get("student-checkPhone.do",{phone:this.value},function (res) {
                   if(res=="true"){
                       $(":submit").prop("disabled",true);
                       alert("手机号已经被使用了");
                   }else{
                       $(":submit").prop("disabled",false);
                       alert("手机号可以使用");
                   }
               }).fail(function (e) {
                   console.log(e)
                   alert("出错了："+e.statusText);
               });
           });
       })
   </script>--%>
    <script>
        window.onload=function () {
            fillGrade();
        }
        function  fillGrade() {
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function () {
                if(xhr.readyState==4 &&xhr.status==200){
                    let res=xhr.responseText;
                    //alert(res);
                    res=JSON.parse(res);//string->jsonobject,stringify :jsonobject=>string
                    let grade=document.getElementById("gradeid");
                    for(let i=0;i<res.length;i++){
                        grade.appendChild(new Option(res[i].gname,res[i].id));
                    }
                }
            };
            xhr.open("get","subjectShowServlet",true);
            xhr.send(null);
        }
        function checkPhone(t) {
            if(t.value=="")
            {
                alert("手机号没填");
                return false;
            }
            //准备验证
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function (ev) {
                if(xhr.readyState==4&&xhr.status==200){
                    console.log(xhr.getAllResponseHeaders());
                    let rtn=xhr.responseText;// response输出的内容
                    if(rtn=="true"){
                        alert("手机号已经被使用了");
                        //提交按钮禁用
                    }else{
                        alert("手机号可以使用");
                    }
                }
            }
            xhr.open("get","student-checkPhone.do?phone="+t.value,true);
            xhr.send(null);//phone=xxxx
        }
    </script>
</head>
<body>
    <h2>注册新生</h2>
    <form method="post" action="addStudentServlet" enctype="multipart/form-data">
        <p>
            <label>姓名</label><input type="text" required name="sname"/>
        </p>
        <p>
            <label>QQ</label><input type="text" required name="qq"/>
        </p>
        <p>
            <label>phone</label><input type="text" id="phone" required name="phone" onblur="checkPhone(this)" />
        </p>
        <p>
        <label>微信号</label><input type="text" required name="wechat"/>
    </p>
        <p>
            <label>年级</label>
            <select name="gradeid" id="gradeid">
                    <c:forEach items="${grades}" var="g">
                        <option value="${g.id}">${g.gname}</option>
                    </c:forEach>
              </select>
            </select>
        </p>
        <p>
            <label>身份证照片正面</label><input type="file" required name="idcard" accept="image/png|jpg|gif" onchange="showPreview(this, 'preview')"/>
            <img src="#" id="preview" height="200px" width="200px">
        </p>
        <p>
            <input type="submit" value="注册"/>
        </p>
    </form>
    <script>
        function showPreview(source, imgId) {
            var file = source.files[0];
            if(window.FileReader) {
                var fr = new FileReader();
                fr.onloadend = function(e) {
                    document.getElementById(imgId).src = e.target.result;
                }
                fr.readAsDataURL(file);
            }
        }
    </script>
</body>
</html>
